* {
    padding: 0;
    margin: 0;
    // box-sizing: border-box;
}

body{
    width: 100%;
    height: 100%;
}

@w: 600px;

.container{
    width: @w;
    margin: 100px auto;
    padding: 0 30px;
    background-color: blanchedalmond;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    h1{
        padding: 20px 0;
    }
    .chess{
        line-height: 150px;
        font-size: 200px;
        padding: 30px 0;
        cursor: pointer;
        .row{
            width: @w;
            height: 200px;
            background-color: gray;
            display: flex;
            justify-content: space-between;
            text-align: center;
            .col{
                width: 33%;
                height: 99%;
                background-color: blanchedalmond;
            }
            .o::before{
                content: 'o';
                color: cadetblue;
            }
            .x::before{
                content: 'x';
                color: coral;
            }
        }
        .row:last-child{
            .col{
                height: 100%;
            }
        }
    }
    .o {
        .col:not(.o):not(.x):hover:before{
            content: 'o';
            color: lightgray;
        }
    }
    .x {
        .col:not(.o):not(.x):hover::before{
            content: 'x';
            color: lightgray;
        }
    }

}

.messageContainer{
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    // 使用position: absolute; 会造成遮盖不住，通过滑动可以露出原内容
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .message{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: @w;
        height: 400px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 10px;
        button{
            width: 100px;
            height: 40px;
            font-size: 18px;
        }
    }
}